<template>
  <div class="flex align-items-center justify-content-center min-h-screen bg-gray-100">
    <div class="surface-card p-4 shadow-2 border-round w-full lg:w-6">
      <h2 class="text-center text-2xl font-bold mb-4">注册账号</h2>
      <form @submit.prevent="handleSubmit" class="p-fluid">
        <div class="field mb-4">
          <label for="username" class="block text-900 font-medium mb-2">用户名</label>
          <InputText
            id="username"
            v-model="formData.username"
            type="text"
            class="w-full"
            :class="{ 'p-invalid': errors.username }"
            placeholder="请输入用户名"
          />
          <small v-if="errors.username" class="p-error">{{ errors.username }}</small>
        </div>
        <div class="field mb-4">
          <label for="email" class="block text-900 font-medium mb-2">邮箱</label>
          <InputText
            id="email"
            v-model="formData.email"
            type="email"
            class="w-full"
            :class="{ 'p-invalid': errors.email }"
            placeholder="请输入邮箱"
          />
          <small v-if="errors.email" class="p-error">{{ errors.email }}</small>
        </div>
        <div class="field mb-4">
          <label for="password" class="block text-900 font-medium mb-2">密码</label>
          <Password
            id="password"
            v-model="formData.password"
            :feedback="true"
            :toggleMask="true"
            class="w-full"
            :class="{ 'p-invalid': errors.password }"
            placeholder="请输入密码"
          />
          <small v-if="errors.password" class="p-error">{{ errors.password }}</small>
        </div>
        <Button type="submit" label="注册" class="w-full" :loading="loading" />
        <div class="text-center mt-4">
          <router-link to="/auth/login" class="text-primary font-medium no-underline">已有账号？立即登录</router-link>
        </div>
      </form>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, reactive } from 'vue';
import { useRouter } from 'vue-router';
import { useAuthStore } from '@/services/auth';

const router = useRouter();
const authStore = useAuthStore();

const formData = reactive({
  username: '',
  email: '',
  password: ''
});

const errors = reactive({
  username: '',
  email: '',
  password: ''
});

const loading = ref(false);

const validateForm = () => {
  let isValid = true;
  errors.username = '';
  errors.email = '';
  errors.password = '';

  if (!formData.username) {
    errors.username = '请输入用户名';
    isValid = false;
  }

  if (!formData.email) {
    errors.email = '请输入邮箱';
    isValid = false;
  } else if (!/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(formData.email)) {
    errors.email = '请输入有效的邮箱地址';
    isValid = false;
  }

  if (!formData.password) {
    errors.password = '请输入密码';
    isValid = false;
  } else if (formData.password.length < 6) {
    errors.password = '密码长度至少为6位';
    isValid = false;
  }

  return isValid;
};

const handleSubmit = async () => {
  if (!validateForm()) return;

  loading.value = true;
  try {
    await authStore.register(formData);
    router.push('/auth/login');
  } catch (error: any) {
    errors.username = error.message;
  } finally {
    loading.value = false;
  }
};
</script>